<template>	
  	<!--配送区域-->
    <div class="goods-detail-item">
        <!--移动到body下面-->
        <transition name="ncbottom">
            <div class="nctouch-bottom-mask" v-show="show" ref="layer">
                <div class="nctouch-bottom-mask-bg" @click="bindCloseArea()" @touchmove="excludeTouch"></div>
                <div class="nctouch-bottom-mask-block">
                    <div class="close" @click="show=false"></div>
                    <div class="dis-top">
                        <h3>配送至</h3>
                    </div>
                    <!-- 地址1 Begin -->
                    <div :class="['address-options',{'hide':showOther}]">
                        <div class="address-select" ref="memberAddress">
                            <ul class="flex flex-v">
                                <li :class="['items flex',{'checked':currentMemberAddress.addressId == item.addressId }]"
                                    v-for="(item , index )  in addressList" @click.stop="bindSelectMemberAddress(item)">
                                    <i class="location"></i>
                                    <div class="address flex1">{{item.addressAreaInfo + " " + item.address}}</div>
                                    <i class="tick"><b></b></i>
                                </li>
                            </ul>
                        </div>
                        <div class="btn flex flex-vc flex-hc absolute"
                             @touchmove="excludeTouch"
                             @click.stop="bindShowOther()"
                        ><a class="action mainBtn flex flex-vc flex-hc"><p>选择其他地址</p></a>
                        </div>
                    </div>
                    <!-- End -->

                    <!-- 地址2 选城市  Begin-->
                    <div :class="['city-options',{'hide':!showOther}]">
                            <div class="city-select flex flex-vc">
                                <dd
                                        v-for="(navItem ,navIndex)  in areaNavArray"
                                        :class="{select:navIndex ==currentAreaIndex }"
                                        @click="bindAreaNavSelect(navIndex)">{{navItem.areaName}}
                                </dd>
                            </div>
                            <div class="city-select-panel flex flex-v" ref='swipe'>
                                <ul :style="{width: width * areaContentArray.length + 'px'}">
                                    <li v-for="(cItem , cIndex) in areaContentArray" :style="{width: width + 'px'}">
                                        <div class="city-item-scroll" :id="'cityItem_' + cIndex">
                                            <dl class="city-item">
                                                <a href="javascript:;"
                                                   v-for="areaItem in  cItem"
                                                   @click="bindAreaSelect(areaItem,cIndex)"
                                                   :class="{checked:currentAreaInfo &&  currentAreaInfo.areaId==areaItem.areaId}">
                                                    <h4>{{areaItem.areaName}}</h4><i></i></a>
                                            </dl>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                    </div>
                    <!-- End -->
                </div>
            </div>
        </transition>
        <!--end 移动到body下面-->
    </div>  		
</template>

<script>
	


import BScroll from 'better-scroll'
var mySwipe, myIScroll,
    iscrollArray = [];
import { requestData } from '@/api/public'
export default {
  data () {
    return {        
        currentAreaIndex: 0,   //当前选择的地区层级 	       
        areaNavArray: [{       //地区选择导航数组
            areaName: "请选择",
            areaId: 0
        }],    	        
        areaContentArray: [],  // 地区列表数组   	
    	
    	
		// 区域选择参数
		urlFreight:'/goods/freight.json',
		urlMemberAddress:'/address/list.json',
		urlAreaList:'/test/goods/area/list',
		max:3,
		goodsId:1,
		buyNum:1,
		currentGoods:1,
		isSelect: false,
        //显示开关
        show: false,
        //显示其他
        showOther: false,
        //缓存会员地址
        addressList: [],
        //当前 会员地址信息
        currentMemberAddress: {
            addressId: 0,
            addressAreaId2: 0,
            addressAreaId3: 0,
            addressAreaInfo: '请选择配送地区',
            address: ''
        },
        //当前运费信息
        currentFreigthInfo: {
            //二级地址
            addressAreaId2: 0,
            addressAreaId3: 0,
            //是否有货 (1-有货,0-无货)
            allowSend: 0,
            //运费(无货时运费为0，不显示运费)
            freightAmount: 0,
            //重量
            freightWeight: 0,
            //体积
            freightVolume: 0
        },
        //当点击最后一级地区的时候不需要更新swipe
        //当初始化的时候改成false
        swipeNoSteup: false,
        //
        cancelWatchShow: false,
        //标识是否正在发送post
        isPosting: false,
        areaId2 : 0,
        areaId3 : 0
    }
  },
  watch: {
	    //监控是否地区选择
	    showOther: function (newValue) {
	        if (newValue) {
	            this.initArea()
	        }
	    },
	    //显示监控
	    show: function (newValue) {
	        var self = this
	        if (newValue) {
	            ( !this.addressList.length) && (this.showOther = true )
	            self.$nextTick(function () {
	                //判断插件加载
	                if (!myIScroll) {
	                    myIScroll = new BScroll(this.$refs.memberAddress, {
	                        scrollX: false,
	                        scrollY: true,
	                        click: true
	                    });
	                }
	            })
	        } else {
	            this.cancelWatchShow || ( this.showOther = newValue )
	            this.cancelWatchShow = false;
	        }
	    },
	    currentGoods : function() {
	        this.getFreight(this.areaId2, this.areaId3);
	    }
	},  
  computed: {
    width: function () {
        return window.screen.width       
    },
    //会员默认地址
    defaultMemberAddress: function () {
        if (!this.addressList.length) {
            var _storage = localStorage.getItem(localStorageKey);
            //获取本地数据
            if (_storage) {
                try {
                    _storage = JSON.parse(_storage);
                } catch (e) {
                    return null
                }
                return {
                    addressId: 0,
                    addressAreaId2: _storage.addressAreaId2,
                    addressAreaId3: _storage.addressAreaId3,
                    addressAreaInfo: _storage.addressAreaInfo,
                    address: ''
                }
            }
            return null
        }
        return this.addressList.filter(function (item) {
                return item.isDefault == 1
            })[0] || this.addressList[0]
    },
    // 运费
    freightAmountText: function () {
        return this.currentFreigthInfo.freightAmount ? "运费" + this.$convertPrice(this.currentFreigthInfo.freightAmount) : ""
    },
    //当前地区选择信息
    currentAreaInfo: function () {
        return this.areaNavArray[this.currentAreaIndex]
    }
  },

  methods: {
  	showWin(){
  	  this.show=true
  	},
    //地区swipe滚动到
    slideToSwipe: function (index, retain) {
        this.$nextTick(function () {
            mySwipe.goToPage(index, 0)
            if (retain) return
            if (iscrollArray[index]) {
                iscrollArray[index].destroy();
            }
            iscrollArray[index] = new BScroll("#cityItem_" + index, {
                scrollX: false,
                scrollY: true,
                click: true,
                tap:true
            });
        })
    },  	
    // 初始化  BScroll组件
    setupSwipe: function () {
        var self = this
        this.$nextTick(function () {
            var _currentIndex = self.currentAreaIndex > 0 ? self.currentAreaIndex - 1 : 0;
            if (mySwipe) {
                mySwipe.refresh()
                return
            }
            mySwipe = new BScroll(this.$refs.swipe, {
                scrollX: true,  // 当设置为 true 的时候，可以开启横向滚动。
                scrollY: false, // 当设置为 true 的时候，可以开启纵向滚动。
                momentum: false,// 当快速在屏幕上滑动一段距离的时候，会根据滑动的距离和时间计算出动量，并生成滚动动画。设置为 true 则开启动画。
                snap: true,     // 这个配置是为了做 slide 组件用的，默认为 false，如果开启则需要配置一个 Object
                snapSpeed: 400,  
                snapCallBack: function (pageX, pageY) {
                    self.currentAreaIndex = pageX
                } ,               
                click: true,
                tap:true,
                bounce: false,  // 当滚动超过边缘的时候会有一小段回弹动画。设置为 true 则开启动画
                excludeElement: "scroll-exclude"
            });
        })
    },  	
    initArea: function () {
        var self = this
        requestData(this.urlAreaList,'POST',{areaId:0}).then(res=>{ 
           self.currentAreaIndex = 0; // 初始化 当前选择的地区ID为0
           // 删除导航数组所有的项 添加最后一项
	       self.areaNavArray.splice(0, self.areaNavArray.length, {
            areaName: "请选择",
            areaId: 0
	       });	       
           self.areaContentArray.splice(0, self.areaContentArray.length, res.data.areaList)
           self.setupSwipe()
           self.slideToSwipe(0)	         
        })
    },  	
    //去除无关的touch事件
    excludeTouch: function (event) {
        event.preventDefault();
        return false;
    },  	
    //地区列表中的地区选择
    bindAreaSelect: function (addressAreaInfo, index) {
    	// addressAreaInfo 循环的地区信息 
    	// index 选择的项的下标
        if (this.currentAreaInfo && this.currentAreaInfo.areaId == addressAreaInfo.areaId) return;
        this.currentAreaIndex = index + 1
        this.areaNavArray.splice(index, this.areaNavArray.length, {
            areaName: addressAreaInfo.areaName,
            areaId: addressAreaInfo.areaId
        })
        this.areaContentArray.splice(index + 1)
        
        if (this.areaContentArray.length >= this.max) {
            this.areaSelectEnd();
        } else {
            this.loadAreaList(addressAreaInfo.areaId)
        }
    },  	
    //获取地区列表
    loadAreaList: function (areaId) {
        var self = this;
        if (this.isPosting) {
            return
        }
        this.isPosting = true
        requestData(this.urlAreaList,'POST',{areaId:areaId}).then(res=>{ 
        	 if(res.responseCode==100){
	           self.areaNavArray.push({
	                areaName: "请选择",
	                areaId: 0
	           });
	           self.areaContentArray.push(res.data.areaList)
	           self.setupSwipe()
	           self.slideToSwipe(self.currentAreaIndex)           	 	
        	 }else{
        	 	 self.areaSelectEnd();
        	 }
            self.isPosting = false                      
        })        
    },  	
    // 地区选择结束
    areaSelectEnd: function () {
        var _addressAreaId2 = this.areaNavArray[1] ? this.areaNavArray[1].areaId : 0,
            _addressAreaId1 = this.areaNavArray[0] ? this.areaNavArray[0].areaId : 0,
            _addressAreaId3 = this.areaNavArray[2] ? this.areaNavArray[2].areaId : 0,
            _addressAreaInfo = this.areaNavArray.map(function (value) {
                return value.areaName
            }).join(" ");
        this.$emit('computerFeight',_addressAreaInfo,_addressAreaId2,_addressAreaId1,_addressAreaId3)
        
//      this.currentMemberAddress = {}
//      this.currentMemberAddress.addressAreaId2 = _addressAreaId2
//      this.currentMemberAddress.addressAreaId3 = _addressAreaId3
//      this.currentMemberAddress.addressAreaInfo = _addressAreaInfo
//      this.currentMemberAddress.addressId = 0;
//      this.currentMemberAddress.address = "";
//      
//      //手动调去运费信息
//      this.getFreight(_addressAreaId2, _addressAreaId3);
//      //关闭地址选择
//      this.bindCloseArea();
    },  	
    //地区导航点击
    bindAreaNavSelect: function (navIndex) {
        this.currentAreaIndex = navIndex
        this.slideToSwipe(navIndex, true)
    },  	
    //点击关闭地区
    bindCloseArea: function () {
        var self = this;
        this.cancelWatchShow = true;
        this.show = false
        this.$emit('showPopup3')
        setTimeout(function () {
            self.showOther = false            
        }, 300)
    } 	
  }
}
</script>

<style>
</style>